<script lang="ts">
import {defineComponent, onMounted, reactive, ref, toRefs} from 'vue'
import IconChange from "@/components/iconChange/icon-change.vue";
import TopLeft from "@/views/home/components/top-left.vue";
import TopRight from "@/views/home/components/top-right.vue";

export default defineComponent({
  name: 'home',
  components: {TopRight, TopLeft, IconChange},

  setup() {

    const data = reactive({})

    const methods = {}

    const validators = {}


    const rules = reactive({})

    const refs = {}


    return {
      ...toRefs(data),
      ...methods,
      validators,
      rules,
      ...refs
    }
  }
})
</script>

<template>
  <div style="width: 100%;height: 100%;display: flex;flex-direction: column;gap: 10px">
    <div class="flex-row gap-x-5">
      <div class="w-p-25 h-100 border-pink flex-row-center">
        ikun 666
      </div>
      <div class="w-p-25 h-100 border-orange">
        纯路人 666
      </div>
      <div class="w-p-25 h-100 border-yellow">
        黑子 6666666
      </div>
      <div class="w-p-25 h-100 border-red">
        你干嘛 66666
      </div>
    </div>

  </div>
</template>

<style scoped>

</style>